<!DOCTYPE html>
<!--
	作者：leryo@163.com
	时间：2018-06-08
	描述：
	还没处理的问题:
	1.按钮的样式 是渐变色  做不出来效果  
	2.橘黄色背景不对,而且需要shade 阴影
	3.head中苹果iphone和后面的字应该用两个div做,并分开-
	4.所有字体排版还没写-
	5.up&below背景颜色-
	6.整个页面弄得太小了,考虑变大一些
	
-->
<html>

	<head>
		<meta charset="UTF-8">
		<title>buyphone</title>
		<style type="text/css">
			body {
				margin: 0px;
			}
			
			#container {
				width: 800px;
				height: 1000px;
				text-align: center;
				margin: 30px auto;
				/*background-color: beige;*/
			}
			
			#page {
				
				width: 700px;
				height: 700px;
				/*background-color: bisque;*/
			}
			
			#head {
				width: 640px;
				height: 50px;
				margin: 0px;
				text-align: left;
				font-family: "微软雅黑";
				font-size: 20px;
				padding: 0px;
				/*background-color: cadetblue;*/
			}
			
			#head01 {
				width: 120px;
				float: left;
				padding-left: 20px;
			}
			
			#head02 {
				width: 400px;
				float: left
			}
			
			#mes {
				width: 200px;
				height: 430px;
				float: left;
				border: 1px solid gainsboro;
				margin: 5px;
				/*background-color: coral;*/
				font-family: "微软雅黑";
				font-size: 16px;
			}
			
			#up {
				width: 180px;
				height: 150px;
				/*border:1px solid gainsboro;*/
				margin: 10px;
				border-bottom: 1px solid gainsboro;
				background-color: #E6E6E6;
			}
			
			#buy {
				width: 250px;
				height: 80px;
				background-color: darkorange;
				border-top-left-radius: 100px;
				border-bottom-left-radius: 100px;
				box-shadow: darkgrey 5px 5px 10px 3px;
				margin-right: 0px;
				float: right;
				/*background-image: url(img/back.png);
				background-size:200px 100px;
   				 background-repeat:no-repeat;*/
			}
			#discount{
				margin-right:0px ;
				float: right;
			}
			
			#below {
				width: 180px;
				height: 250px;
				/*border:1px solid gainsboro;*/
				margin: 10px;
				background-color: #E6E6E6;
			}
			
			#pic {
				width: 430px;
				height: 430px;
				float: left;
				border: 1px solid gainsboro;
				margin-top: 5px;
			}
			
			div>img {
				width: 428px;
				height: 427px;
				padding-top: 0px;
			}
			
			p>img {
				width: 80px;
				height: 80px;
			}
			
			#para02,
			#para01 {
				height: 20px;
			}
			
			#para03 {
				font-size: 22px;
			}
			
			#price,
			#but2 {
				width: 50%;
				height: 100%;
				float: left;
			}
			
			#price {
				padding-top: 10px;
				color: white;
			}
			
			input {
				width: 60px;
				height: 40px;
				border-radius: 20px;
				margin-top: 18px;
				border-color: #FCCA79;
				background: -webkit-radial-gradient(50% 50%, closest-corner, #FE7002 20%, #FDC55B 150%);
				/* Safari 5.1 - 6.0 */
				background: -o-radial-gradient(50% 50%, closest-corner, #FE7002 20%, #FDC55B 150%);
				/* Opera 11.6 - 12.0 */
				background: -moz-radial-gradient(50% 50%, closest-corner, #FE7002 20%, #FDC55B 150%);
				/* Firefox 3.6 - 15 */
				background: radial-gradient(50% 75%, closest-corner, #FE7002 20%, #FDC55B 150%);
				/* 标准的语法（必须放在最后） */
			}
			table{ 
				width: 170px;
				font-size: 12px;
				margin-top:10px;
				margin-right: 0px;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<div id="page">
				<div id="head">
					<div id="head01">
						<p>苹果iphone</p>
					</div>
					<div id="head02">
						<p>您的体验是我们最大的努力方向</p>
					</div>

				</div>
				<div id="mes">
					<div id="up">
						<div id="buy">
							<div id="price">
								<p>&yen;3000.00</p>

							</div>
							<div id="but2">
								<input type="button" value="购买" />
							</div>
						</div>
						<div id="discount">
							<table border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td>原价</td>
									<td>折扣</td>
									<td>节省</td>
								</tr>
								<tr>
									<td>&yen;5200.00</td>
									<td>5.77</td>
									<td>&yen;2200.00</td>
								</tr>
							</table>
						</div>
					</div>
					<div id="below">
						<p id="para01">0人已购买</p>
						<p id="para02">本单仅剩：100份，预购从速</p>
						<p id="para03">
							<b>
								<img src="img/notime.png" alt="sandglass" align="bottom" />
								即将成功，赶紧加入团购...
							</b>
						</p>
						<p id="para01">距离本次团购...结束还有</p>
						<p id="para01">5天1小时1分3秒</p>
					</div>
				</div>
				<div id="pic">
					<img src="img/phone.png" alt="phone" />
				</div>
			</div>

		</div>
	</body>

</html>